import { List, Grid } from 'antd-mobile'
import React, { Component } from 'react'
import propTypes from 'prop-types'

export default class HeaderSlector extends Component {

    static propTypes = {
        setHeader : propTypes.func.isRequired
    }
    state = {
        icon: null  // 图片对象
    }
    constructor(props){
        super(props)
        this.headerList = []
        for(let i=0; i<20; i++){
            this.headerList.push({
                text: '头像'+(i+1),
                icon: require(`../../assets/images/头像${i+1}.png`).default  // 不能使用import https://www.cnblogs.com/cangqinglang/p/10445256.html
            })
        }
    }
    // 调用setHeader 和 更新icon
    handleOnclick = ({text, icon}) => {
        // 调用函数更新父组件状态
        this.props.setHeader(text)
        // 更新当前组件状态
        this.setState({icon})
    }

    render() {
        const {icon} = this.state
        const listHeader = !icon ? '请选择头像' :(
            <div>
                已选择头像: <img src={icon}/>
            </div>
        )
        return (
            <List renderHeader={()=>listHeader}>
                <Grid data={this.headerList} hasLine={true} columnNum={5} onClick={this.handleOnclick}></Grid>
            </List>
        )
    }
}
